<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>$!{i18n.get("roles")}-$!{i18n.get("system")}$!{i18n.get("mng")}</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  #parse('/headFiles.html')
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
              <input type="text" name="name" placeholder="$!{i18n.get('Fuzzy')}" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="LAY-list-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
      	<div style="padding-bottom: 10px;">
          <button class="layui-btn LAY-btn-fun" data-type="add">新增角色</button>
        </div>
        <table id="LAY-list" lay-filter="LAY-list"></table>
        <script type="text/html" id="table-operate">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update"><i class="layui-icon layui-icon-edit"></i>修改</a>
		  <a class="layui-btn layui-btn-xs" lay-event="configMenu"><i class="layui-icon layui-icon-edit"></i>配置菜单</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-edit"></i>删除</a>
        </script>
      </div>
    </div>
  </div>
#parse('/footFiles.html')
<script type="text/javascript">
  layui.config({
    base: '$!{webRoot}/assets/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'table'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table;
    
    table.render({
      elem: '#LAY-list'
      ,url: '$!{webRoot}/sys/role/list.data'
   	  ,method: 'post'
	  ,parseData: function(res){
   	    return {
   	      "code": res.code,
   	      "msg": res.msg,
   	      "count": res.body.total,
   	      "data": res.body.data
   	    };
	  }
      ,response: {statusCode: 200}
      ,cellMinWidth:130
      ,cols: [[
        {field: 'id', title: 'ID', sort: true}
        ,{field:'name', title: '角色名称'}
        ,{field:'code', title: '角色编码'}
        ,{field:'status', title: '状态',templet: function(d){
      	  if(d.status == 1){
      		  return '已启用';
      	  }else{
      		  return '未启用('+d.status+')';
      	  }
        }}
        ,{field:'note', title: '角色描述'}
        ,{field: 'createDate', title: '创建时间', sort: true}
        ,{title: '$!{i18n.get("Operation")}', width: 250, align:'center', toolbar: '#table-operate'}
      ]]
      ,page: true
      ,limit: 20
      ,height: 'full-220'
    });
    
    //监听搜索
    form.on('submit(LAY-list-search)', function(data){
      var field = data.field;
      //执行重载
      table.reload('LAY-list', {
        where: field
       ,page: {curr:1}
      });
    });
    
  	//事件
    var active = {
   		add: function(){
	    	let index = layer.open({
	          type: 2
	          ,title: '新增角色'
	          ,content: '$!{webRoot}/sys/role/add.html'
	          ,maxmin: false
	          ,area: ['550px', '500px']
	          ,btn: ['确定','取消']
	          ,yes: function(index, layero){
	        	  var iframeWindow = window['layui-layer-iframe'+ index]
	               ,submit = layero.find('iframe').contents().find("#LAY-form-submit");
	               iframeWindow.layui.form.on('submit(LAY-form-submit)', function(data){
	                 var field = data.field; //获取提交的字段
	               	$.ajax({
			    		type: "post",
			            url: "$!{webRoot}/sys/role/add.do",
			            data:field,
						dataType:"json",
						success:function(res){
							if(res.code == 200){
								table.reload('LAY-list'); //数据刷新
		                    	layer.close(index); //关闭弹层
							}else{
								layer.msg(res.msg,{icon: 2});
							}
						}
			        });
	              });  
	              submit.trigger('click');
	          }
	        }); 
	     }
    	,update:function(obj){
	   	  	let index = layer.open({
	           type: 2
	           ,title: '配置菜单'
	           ,content: '$!{webRoot}/sys/role/update.html?id='+obj.data.id
	           ,maxmin: false
	           ,area: ['550px', '500px']
	           ,btn: ['确定','取消']
	           ,yes: function(index, layero){
	         	  var iframeWindow = window['layui-layer-iframe'+ index]
	               ,submit = layero.find('iframe').contents().find("#LAY-form-update");
	               iframeWindow.layui.form.on('submit(LAY-form-update)', function(data){
	                 var field = data.field; //获取提交的字段
	               	$.ajax({
			    		type: "post",
			            url: "$!{webRoot}/sys/role/update.do",
			            data:field,
						dataType:"json",
						success:function(res){
							if(res.code == 200){
								table.reload('LAY-list'); //数据刷新
		                    	layer.close(index); //关闭弹层
							}else{
								layer.msg(res.msg,{icon: 2});
							}
						}
			        });
	              });  
	              submit.trigger('click');
	           }
	         }); 
      	}
    	,del:function(obj){
    		layer.confirm('确定要删除该角色吗？', function(index){
            	$.ajax({
              	  type: "post",
                  url: "$!{webRoot}/sys/role/del.do",
                  data:{id:obj.data.id},
          		  dataType:"json",
          		  success:function(res){
          			if(res.code == 200){
          				table.reload('LAY-list'); //数据刷新
          				obj.del();
          			}else{
          				layer.msg(res.msg,{icon: 5});
          			}
          		  }
                });
            	layer.close(index);
            });
    	}
    	,configMenu:function(obj){
    		parent.layui.index.openTabsPage('$!{webRoot}/sys/role/menu/config.html?roleId='+obj.data.id,  '配置菜单['+obj.data.name+']');
    	}
  	};
  	
    $('.layui-btn.LAY-btn-fun').on('click', function(){
    	let type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    
    table.on('tool(LAY-list)', function(obj){
      	let type = obj.event ;
      	active[type] ? active[type].call(this,obj) : '';
    });
  });
</script>
</body>
</html>